<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="产品类型" prop="quTypeId" v-if="isShow">
        <el-select v-model="queryParams.quTypeId" placeholder="请选择">
          <el-option
            v-for="dict in pr_list"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品品牌" prop="quCaBrand" v-if="isShow">
        <el-select v-model="queryParams.quCaBrand" placeholder="请选择">
          <el-option
            v-for="item in listBrand"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="施工店名" prop="quShop" v-if="isShow">
        <el-select v-model="queryParams.quShopName" placeholder="请选择">
          <el-option
            v-for="item in jmsList"
            :key="item.value"
            :label="item.label"
            :value="item.leName + ''"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示" prop="quShow" v-if="isShow">
        <el-select
          v-model="queryParams.quShow"
          @change="changeCode"
          placeholder="请选择是否显示"
        >
          <el-option label="显示" value="0"></el-option>
          <el-option label="隐藏" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="质保编码"  v-if="isShow">
        <el-input v-model="queryParams.quQualityNum" placeholder="按质保编码搜索" />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['applet:guarantee:add']"
          >新增</el-button
        >
      </el-col>
<!--      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['applet:guarantee:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="guaranteeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" label="序号" align="center" />
      <el-table-column label="产品类型" align="center" prop="quTypeId">
        <template slot-scope="{ row }">
          {{ selectDictLabels(pr_list, String(row.quTypeId)) }}
        </template>
      </el-table-column>
      <el-table-column label="产品品牌" align="center" prop="quCaBrand">
        <template slot-scope="{ row }">
          {{ selectDictLabels(listBrand, String(row.quCaBrand)) }}
        </template>
      </el-table-column>

      <el-table-column label="车主姓名" align="center" prop="quName" />
      <el-table-column label="车主电话" align="center" prop="quPhone" />
      <el-table-column label="施工店名" align="center" prop="quShopName" />
      <el-table-column label="施工颜色" align="center" prop="quBuildColor" />
      <el-table-column label="贴车价格" align="center" prop="quPasteMoney" />
      <el-table-column label="产品型号" align="center" prop="prModel" />
      <el-table-column label="质保编号" align="center" prop="quQualityNum" />
      <el-table-column label="图片" align="center" prop="quPic">
        <template slot-scope="{ row }">
          <el-image
            v-for="(item, index) in row.quPic"
            :key="index"
            :src="item"
            :preview-src-list="[item]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否显示" align="center" prop="quShow" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['applet:guarantee:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['applet:guarantee:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改质保管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <div class="flex">
          <!-- left -->
          <div class="flex1">
            <el-form-item label="产品类型" prop="quTypeId">
              <el-select v-model="form.quTypeId" placeholder="请选择">
                <el-option
                  v-for="dict in pr_list"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="产品型号"
              v-if="form.quTypeId != '102'"
              prop="prModel"
            >
              <el-select v-model="form.prModel" placeholder="请选择">
                <el-option
                  v-for="item in cpxhList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车主姓名" prop="quName">
              <el-input v-model="form.quName" placeholder="请输入车主姓名" />
            </el-form-item>
            <el-form-item label="车型" prop="quModel">
              <el-input v-model="form.quModel" placeholder="请输入车型" />
            </el-form-item>
            <el-form-item label="施工店名" prop="quShop">
              <el-select v-model="form.quShop" placeholder="请选择">
                <el-option
                  v-for="item in jmsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="施工颜色"
              v-if="form.quTypeId == '101'"
              prop="quBuildColor"
            >
              <el-input
                v-model="form.quBuildColor"
                placeholder="请输入施工颜色"
              />
            </el-form-item>
            <el-form-item label="贴车价格" prop="quPasteMoney">
              <el-input
                v-model="form.quPasteMoney"
                placeholder="请输入贴车价格"
              />
            </el-form-item>
            <el-form-item label="车架号" prop="quVin">
              <el-input v-model="form.quVin" placeholder="请输入车架号" />
            </el-form-item>
            <el-form-item
              label="前挡质保编号"
              v-if="form.quTypeId == '102'"
              prop="quFrontNum"
            >
              <el-input
                v-model="form.quFrontNum"
                placeholder="请输入前挡质保编号"
              />
            </el-form-item>
            <el-form-item
              label="前挡膜筒序列号"
              v-if="form.quTypeId == '102'"
              prop="quFrontFilm"
            >
              <el-input
                v-model="form.quFrontFilm"
                placeholder="请输入前挡膜筒序列号"
              />
            </el-form-item>

            <el-form-item label="是否显示" prop="quShow">
              <el-radio-group v-model="form.quShow">
                <el-radio :label="0">显示</el-radio>
                <el-radio :label="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" prop="quOrder">
              <el-input-number
                v-model="form.quOrder"
                :min="1"
                :max="1000"
                label="排序"
              ></el-input-number>
            </el-form-item>
          </div>
          <!-- right -->
          <div class="flex1">
            <el-form-item label="产品品牌" prop="quCaBrand">
              <el-select v-model="form.quCaBrand" placeholder="请选择">
                <el-option
                  v-for="item in listBrand"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="质保编号" prop="quQualityNum">
              <el-input
                v-model="form.quQualityNum"
                placeholder="请输入质保编号"
              />
            </el-form-item>
            <el-form-item label="车主电话" prop="quPhone">
              <el-input v-model="form.quPhone" placeholder="请输入车主电话" />
            </el-form-item>
            <el-form-item label="车牌号" prop="quLicencePlate">
              <el-input
                v-model="form.quLicencePlate"
                placeholder="请输入车牌号"
              />
            </el-form-item>
            <el-form-item label="施工部位" prop="quBuildDept">
              <el-input
                v-model="form.quBuildDept"
                placeholder="请输入施工部位"
              />
            </el-form-item>
            <el-form-item label="施工日期" prop="quBuildTime">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.quBuildTime"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="质保年限" prop="quAgeLimit">
              <el-input
                v-model="form.quAgeLimit"
                placeholder="请输入质保年限"
              />
            </el-form-item>
            <el-form-item label="膜筒序列号" prop="quFilmNum">
              <el-input
                v-model="form.quFilmNum"
                placeholder="请输入膜筒序列号"
              />
            </el-form-item>

            <el-form-item
              label="侧后档质保编号"
              v-if="form.quTypeId == '102'"
              prop="quSideNum"
            >
              <el-input
                v-model="form.quSideNum"
                placeholder="请输入侧后档质保编号"
              />
            </el-form-item>
            <el-form-item
              label="侧后档膜筒序列号"
              v-if="form.quTypeId == '102'"
              prop="quSideFilm"
            >
              <el-input
                v-model="form.quSideFilm"
                placeholder="请输入侧后档膜筒序列号"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </div>

        <el-form-item label="图片" prop="quPic">
          <el-upload
            :headers="headers"
            :limit="999"
            class="avatar-uploader"
            :action="uploadFileUrl"
            :file-list="fileList"
            list-type="picture-card"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  listGuarantee,
  getGuarantee,
  delGuarantee,
  addGuarantee,
  updateGuarantee,
  exportExcel
} from "@/api/guarantee";
import { getCode } from "@/api/code";
import { listBrand } from "@/api/product/brand"; // 产品类型
import { listNoPageModel } from "@/api/product/model"; // 产品型号
import { listNoPageLeague } from "@/api/applet/league";

export default {
  name: "Guarantee",
  dicts: ["product_type"],
  data() {
    return {
	 isShow:true,//根据这个状态，判断上面的搜索输入框是否显示
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 质保管理表格数据
      guaranteeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        quTypeId: null,
        quCaBrand: null,
        quName: null,
        quPhone: null,
        quVin: null,
        quModel: null,
        quLicencePlate: null,
        quShop: null,
        quBuildTime: null,
        quBuildDept: null,
        quBuildColor: null,
        quPasteMoney: null,
        quAgeLimit: null,
        prModel: null,
        quQualityNum: null,
        quFilmNum: null,
        quFrontNum: null,
        quFrontFilm: null,
        quSideNum: null,
        quSideFilm: null,
        quWorker: null,
        quPic: null,
        quOrder: null,
        quShow: null,
        creationTime: null,
        creationBy: null,
        quStatus: null,
		quShopName:null
      },
      // 表单参数
      form: {
        quQualityNum: "", //质保编号
        quTypeId: "", // 汽车膜型号
        quCaBrand: "", // 产品品牌
        quName: "", // 车主姓名
        quPhone: "", //车主电话
        quVin: "", //车架号
        quModel: "", //车型
        quLicencePlate: "", //车牌号
        quShop: "", // 施工店名
        quBuildTime: "", // 施工时间
        quBuildDept: "", // 施工部位
        quPasteMoney: "", // 贴车价格
        quAgeLimit: "", // 质保年限
        prModel: "", // 产品型号
        quFilmNum: "", //膜筒序列号
        quBuildColor: "", // 颜色
        quFrontNum: "", // 前挡质保编号
        quFrontFilm: "", //前挡膜筒序列号
        quSideNum: "", //侧后档质保编号
        quSideFilm: "", //侧后档膜筒序列号
        quPic: [], // 图片
      },
      // 表单校验
      rules: {},
      baseUrl: process.env.VUE_APP_BASE_API, // 图片上传地址
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      image: "",
      fileList: [],
      pr_list: [], //产品类型
      listBrand: [], // 产品品牌
      cpxhList: [], // 产品类型
      jmsList: [], // 加盟商列表
    };
  },
  created() {
    this.getList();
    // 获取字典数据
    this.getDicts("product_type").then((response) => {
      this.pr_list = response.data.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictCode,
        };
      });
    });
    // 产品品牌
    listBrand(this.queryParams).then((res) => {
      this.listBrand = res.rows.map((res) => {
        return {
          label: res.brName,
          value: res.id,
        };
      });
    });
    // 产品型号
    listNoPageModel(this.queryParams).then((res) => {
      this.cpxhList = res.rows.map((item) => {
        return {
          label: item.prModel,
          value: item.id,
        };
      });
    });
    // 获取加盟商列表
    listNoPageLeague(this.queryParams).then((response) => {
      response.rows.map((item) => {
        item.label = item.leShop;
        item.value = item.id;
      });
      this.jmsList = response.rows;
      console.log(1010,this.jmsList)
    });
  },
  methods: {
    // 根据品牌类型 和 型号生成质保编码
    // getType(id) {
    //   this.createCode();
    // },
    // getCaBrand(id) {
    //   this.createCode();
    // },

    // // 生成
    // createCode() {
    //   if (
    //     this.form.quCaBrand != null &&
    //     this.form.quTypeId != null &&
    //     this.title == "添加质保管理"
    //   ) {
    //     const { quTypeId, quCaBrand } = { ...this.form };
    //     getCode({ quTypeId, quCaBrand }).then((res) => {
    //       this.form.quQualityNum = res.data.quQualityNum;
    //       this.form.pnId = res.data.pnId;
    //       this.form.coSome = res.data.coSome;
    //     });
    //   }
    // },

    /** 查询质保管理列表 */
    getList() {
      this.loading = true;
      listGuarantee(this.queryParams).then((response) => {
		console.log(2020,response.status)
		if(response.status==1){
			this.isShow=false
		}else{
			this.isShow=true
		}
        response.rows.forEach((item) => {
          if (item.quPic) {
            item.quPic = item.quPic.split(",").map((map) => {
              return process.env.VUE_APP_BASE_API + map;
            });
          } else {
            item.quPic = "";
          }
          item.quShow = item.quShow == 1 ? "隐藏" : "显示";
        });
        console.log(9090,response.rows);
        this.guaranteeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 上传图片
    handleSuccess(res, file, fileList) {
      this.fileList.push({
        name: file.name,
        filePic: res.fileName,
        url: res.url, // 假设返回的response包含文件的url
      });
      this.$forceUpdate();
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isLt2M;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        quTypeId: null,
        quCaBrand: null,
        quName: null,
        quPhone: null,
        quVin: null,
        quModel: null,
        quLicencePlate: null,
        quShop: null,
        quBuildTime: null,
        quBuildDept: null,
        quBuildColor: null,
        quPasteMoney: null,
        quAgeLimit: null,
        prModel: null,
        quQualityNum: null,
        quFilmNum: null,
        quFrontNum: null,
        quFrontFilm: null,
        quSideNum: null,
        quSideFilm: null,
        quWorker: null,
        quPic: null,
        quOrder: null,
        quShow: 0,
        creationTime: null,
        creationBy: null,
        remark: null,
		quShopName:null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 选中修改
    changeCode() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
	  this.queryParams={
		  quTypeId:null,
		  quCaBrand:null,
		  quShopName:null,
		  quShow:null,
		  quQualityNum:null,

	  }
      this.resetForm("queryForm");
      // this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加质保管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getGuarantee(id).then((response) => {
        this.fileList = [];
        if (response.data.quPic == null) response.data.quPic = "";
        response.data.quPic.split(",").forEach((item) => {
          this.fileList.push({
            filePic: item,
            name: "",
            url: this.baseUrl + item,
          });
        });
        this.form = response.data;
        this.open = true;
        this.title = "修改质保管理";
      });
    },
    testFrom() {
      const {
        quTypeId,
        quCaBrand,
        quName,
        quPhone,
        quVin,
        quModel,
        quLicencePlate,
        quShop,
        quBuildTime,
        quBuildDept,
        quPasteMoney,
        quAgeLimit,
        prModel,
        quFilmNum,
        quBuildColor,
        quFrontNum,
        quFrontFilm,
        quSideNum,
        quSideFilm,
      } = {
        ...this.form,
      };
      if (!quCaBrand) {
        this.$message({ message: "产品品牌不能为空", type: "warning" });
        return false;
      } else if (!quLicencePlate) {
        this.$message({ message: "车牌号不能为空", type: "warning" });
        return false;
      } else if (!quShop) {
        this.$message({ message: "施工店名不能为空", type: "warning" });
        return false;
      } else if (!quBuildTime) {
        this.$message({ message: "施工时间不能为空", type: "warning" });
        return false;
      } else {
      /*
      else if (!quBuildDept) {
        this.$message({ message: "施工部位不能为空", type: "warning" });
        return false;
      } else if (!quPasteMoney) {
        this.$message({ message: "贴车价格不能为空", type: "warning" });
        return false;
      } else if (!quAgeLimit) {
        this.$message({ message: "质保年限不能为空", type: "warning" });
        return false;
      } else if (!prModel && (quTypeId == "101" || quTypeId == "100")) {
        this.$message({ message: "产品型号不能为空", type: "warning" });
        return false;
      } else if (!quFilmNum) {
        this.$message({
          message: "膜筒序列号不能为空",
          type: "warning",
        });
        return false;
      } else if (quTypeId == "101" && !quBuildColor) {
        this.$message({ message: "颜色不能为空", type: "warning" });
        return false;
      }
      else if (quTypeId == "102" && !quFrontNum) {
        this.$message({
          message: "前挡质保编号不能为空",
          type: "warning",
        });
        return false;
      } else if (quTypeId == "102" && !quFrontFilm) {
        this.$message({
          message: "前挡膜筒序列号不能为空",
          type: "warning",
        });
        return false;
      }

      else if (quTypeId == "102" && !quSideNum) {
        this.$message({
          message: "侧后档质保编号不能为空",
          type: "warning",
        });
        return false;
      } else if (quTypeId == "102" && !quSideFilm) {
        this.$message({
          message: "侧后档膜筒序列号不能为空",
          type: "warning",
        });
        return false;
      } else if (this.form.quPic == "" || this.form.quPic == null) {
        this.$message({ message: "施工图片不能为空", type: "warning" });
        return false;
      }
      */
        return true;
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        this.form.quPic = this.fileList.map((item) => item.filePic).join(",");
        if (this.testFrom()) {
          if (valid) {
            if (this.form.id != null) {
              updateGuarantee(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              // 新增
              this.form.quPic = this.fileList
                .map((item) => item.filePic)
                .join(",");
              addGuarantee(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
                this.image = "";
              });
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除质保管理编号为"' + ids + '"的数据项？')
        .then(function () {
          return delGuarantee(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
		this.download('applet/guarantee/export', {
		  ...this.queryParams
		}, `guarantee_${new Date().getTime()}.xlsx`)
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .el-select {
  width: 100%;
}
</style>
